<template>

  <div ref="container"></div>
  
</template>

<script>
import * as THREE from 'three';
import { Message } from 'element-ui'; // 导入 Element UI 的消息组件
import imgSrc1 from '../assets/liu.png'; // 导入图片
import imgSrc2 from '../assets/zhang.png';
import imgSrc3 from '../assets/feng.png';
import imgSrc4 from '../assets/90.png';
import imgSrc5 from '../assets/zhu.png';

export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 创建场景
      this.scene = new THREE.Scene();

      // 创建相机
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      this.camera.position.z = 5;

      // 创建渲染器
      this.renderer = new THREE.WebGLRenderer({ alpha: true });
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.setClearAlpha(0); // 设置透明背景
      this.$refs.container.appendChild(this.renderer.domElement);

      // 创建立方体数组
      this.geometries = [];
      this.materials = [];
      this.cubes = [];
      const imgSrcs = [imgSrc1, imgSrc2, imgSrc3, imgSrc4, imgSrc5]; // 图片数组

         // 创建 Raycaster
    this.raycaster = new THREE.Raycaster();
    this.mouse = new THREE.Vector2();

      // 添加鼠标点击事件监听器
    this.renderer.domElement.addEventListener('click', (event) => {
      // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围都是 (-1 to +1)
      this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

      // 通过摄像机和鼠标位置更新射线
      this.raycaster.setFromCamera(this.mouse, this.camera);

      // 计算物体和射线的焦点
      const intersects = this.raycaster.intersectObjects(this.cubes);

      if (intersects.length > 0) {
        // 如果有一个或多个交点
        const intersect = intersects[0];

        // 在这里处理点击事件
       this.$router.push({ path: '/schedulinglist' });
      }
    }, false);

      // 手动设置立方体的位置和间距
      const positions = [
        { x: -3, y: 1.5, z: 0 },
        { x: 3, y: 1.5, z: 0 },
        { x: -1.5, y: -1.5, z: 0 },
        { x: 1.5, y: -1.5, z: 0 },
        { x: 0, y: 0, z: 0 }
      ];

      // 循环创建五个立方体
      for (let i = 0; i < 5; i++) {
        this.geometries.push(new THREE.BoxGeometry());
        this.materials.push(new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load(imgSrcs[i]) }));
        this.cubes.push(new THREE.Mesh(this.geometries[i], this.materials[i]));
        this.scene.add(this.cubes[i]);

        // 设置立方体的位置
        this.cubes[i].position.set(positions[i].x, positions[i].y, positions[i].z);

        // 添加点击事件监听器
        this.cubes[i].addEventListener('click', () => {
          this.showDoctorInfo(i); // 传递立方体索引
        });
      }

      // 自动旋转
      this.animate();

      // 监听窗口大小变化
      window.addEventListener('resize', this.onWindowResize);
    },
    animate() {
      requestAnimationFrame(this.animate.bind(this)); // 绑定上下文
      this.cubes.forEach(cube => {
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
      });
      this.renderer.render(this.scene, this.camera);
    },
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
  
  }
};
</script>

<style>
#container {
  width: 100%;
  height: 100%;
}
</style>









